<template>
    <div class="print-component">

        <div id="printPanel">
            <h1 style="text-align: center">
              <div style="text-align: center; width: 100%; margin-bottom: 10px">
                <span style="color:#606266;font-size:24px;letter-spacing:10px;padding:0 12px 0 0">{{ high ? $t('lab.nianduHigh') : $t('lab.niandu') }}:</span>
                <span style="font-size: 40px; color: red; ">{{ result }}</span>
              </div>
            </h1>
            <h4 style="text-align: right">{{ measureTime }}</h4>

            <el-divider><i class="el-icon-s-data"></i></el-divider>

            <el-row :gutter="12" >
                <el-col :lg="24" :xs="24" :sm="24" :md="24" :xl="24">
                    <el-card shadow="always">
                        <div slot="header" class="clearfix">
                            <span> {{$t("lab.setting")}}</span>
                        </div>
                        <div>
                            <el-form :model="settingData" ref="setting" label-width="auto" >
                                <el-col :lg="12"  :xs="12" :sm="12" :md="12" :xl="12">
                                    <el-form-item :label="$t('lab.sampleName')" prop="sampleName">
                                        {{settingData.sampleName}}
                                    </el-form-item>
                                </el-col>
                                <el-col :lg="12" :xs="12"  :sm="12" :md="12" :xl="12">
                                    <el-form-item :label="$t('lab.operator')"  prop="operator">
                                        {{settingData.operator}}
                                    </el-form-item>
                                </el-col>
                                <el-col :lg="12" :xs="12" :sm="12" :md="12" :xl="12">
                                    <el-form-item :label="$t('lab.coldTemperature')" prop="coldTemperature">
                                        {{settingData.coldTemperature}}°C
                                    </el-form-item>
                                </el-col>
                                <el-col :lg="12" :xs="12" :sm="12" :md="12" :xl="12">
                                    <el-form-item :label="$t('lab.measureTemperature')" prop="measureTemperature">
                                        {{settingData.measureTemperature}}°C
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
                <el-col :lg="24" :xs="24" :sm="24" :md="24" :xl="24">
                  <el-card shadow="always">
                    <div slot="header" class="clearfix">
                      <span> {{$t("lab.receiving")}}</span>
                    </div>
                    <div>
                      <el-form ref="form" :model="receiving" label-width="auto">
                        <el-col :xl="24" :lg="24" :md="24" :xs="24" :sm="24">
                          <el-form-item :label="$t('lab.niandu')">
                            {{ receivingData.niandu }}
                          </el-form-item>
                        </el-col>
                        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
                          <el-form-item :label="$t('lab.coldTemperature') + '(°C)'">
                            {{ receivingData.resultColdTemp }}
                          </el-form-item>
                        </el-col>  : "",
                        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
                          <el-form-item :label="$t('lab.measureTemperature') + '(°C)'">
                            {{ receivingData.resultMeasuterTemp }}
                          </el-form-item>
                        </el-col>
                        <el-col :xl="12" :lg="12" :md="12" :xs="24" :sm="24">
                          <el-form-item :label="$t('lab.rotate') + '(rpm)'">
                            {{ receivingData.speed }}
                          </el-form-item>
                        </el-col>
                        <el-col :xl="12" :lg="12" :md="12" :xs="24" :sm="24">
                          <el-form-item :label="$t('lab.current') + 'mA'">
                            {{ receivingData.electric }}
                          </el-form-item>
                        </el-col>
                      </el-form>
                    </div>
                  </el-card>
                </el-col>
            </el-row>
            <el-divider><i class="el-icon-s-data"></i></el-divider>

            <el-form ref="form" label-width="80px">
                <el-col :offset="12">
                    <el-form-item :label="$t('print.sign')">
                    </el-form-item>
                </el-col>
                <el-col :offset="12">
                    <el-form-item :label="$t('print.date')">
                    </el-form-item>
                </el-col>
            </el-form>

            <el-button type="primary" v-print="printObj" style="width: 100%" >{{ $t("print.btn") }} </el-button>

        </div>
    </div>
</template>

<script>
    export default {
        props : {
            header: {
                type: String,
                default: ""
            },
            settingData : {
                default: () => {}
            },
            receivingData : {
                default: () => {}
            },
            measureTime: {
                type: String,
                default: ""
            },
            result: {
              type: Number,
              default: null
            },
            high: {
              type:Boolean,
              default: false
            }
        },
        data() {
            let that = this;
            return {
                printObj: {
                    id : "printPanel",
                    closeCallback() {
                        that.$emit("close");
                    },
                }
            }
        },
        methods: {
        }
    }
</script>

<style media="print" scoped>

</style>
